<script setup lang="ts">
import ECharts from "@/components/ECharts.vue";
import { VueDraggable } from "vue-draggable-plus";

import { useMessage } from "naive-ui";
import { upload_excel } from "@/service";
const list1 = ref([
  {
    name: "Values2",
    id: "1",
    value: {
      a: [14.38, 46.53, 0.75, 92.38, 90.05, 64.64, 35.05, 76.43, 50.08, 63.84],
      b: [92.97, 20.82, 42.57, 36.42, 72.81, 60.33, 15.37, 21.62, 59.13, 14.69],
      c: [56.06, 83.04, 85.1, 45.39, 69.15, 13.85, 81.2, 2.06, 49.14, 87.7],
      d: [24.17, 89.33, 96.43, 13.04, 29.95, 83.4, 91.14, 17.56, 6.58, 91.38]
    },
  },
  {
    name: "Values3",
    id: "2",
    value: {
      a:[88.68, 85.91, 40.84, 14.22, 59.23, 60.45, 7.67, 34.52, 86.83, 91.46],
      b:[37.99, 43.3, 87.42, 17.22, 23.46, 21.01, 39.63, 63.68, 96.29, 86.41],
      c:[91.2, 68.85, 51.13, 45.39, 96, 82.54, 39.78, 0.89, 6.76, 5.97],
      d:[11.42, 51.49, 45.45, 99.3, 25.62, 71.47, 60.52, 1.83, 23.45, 39.3]
    },
  }
]);
const list2 = ref([]);

let option = reactive({ list: [] });

function onUpdate() {
  console.log("update");
}
function onAdd() {
  console.log("add");
}
function remove() {
  console.log("remove::::", option);
}

async function analysisClick() {
  let dataList = JSON.parse(JSON.stringify(list2.value));
  let _datalist = [];
  for (let i = 0; i < dataList.length; i++) {
    let itemList = dataList[i].value
    let dataKeys = Object.keys(itemList)
    let dataVal = []
    for(let itemkeys in itemList) {
        let sum = itemList[itemkeys].reduce((total,curr)=>total+curr,0)
        let avg = sum/itemList[itemkeys].length
        let sumPow = 0
        for(let j=0;j<itemList[itemkeys].length;j++){
          sumPow += Math.pow(itemList[itemkeys][j]-avg,2)
        }
        let vari = (1/itemList[itemkeys].length)*sumPow
        dataVal = [...dataVal,vari]
    }
 
    _datalist = [
      ..._datalist,
      {
        legend: {
          data: [dataList[i].name],
          orient: "vertical",
          right: 10,
          top: 10,
        },
        xAxis: {
          type: "category",
          splitLine: { show: false },
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            align: "center", // 设置X轴刻度标签居中
          },
          data: dataKeys
        },
        yAxis: {
          type: "value",
          splitLine: { show: false },
        },
        series: [
          {
            data: dataVal,
            type: "line",
            name: dataList[i].name,
            barMaxWidth: 30,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            itemStyle: {
              color: "#178AEC", // 设置柱状图的颜色
            },
          },
        ],
      },
    ];
  }
  option.list = _datalist;
}

let showModal = ref(false);
async function sampleClick() {
  showModal.value = true;
}

function cancelCallback() {}
function submitCallback() {}

const message = useMessage();
const customRequest = async ({
  file,
  data,
  headers,
  withCredentials,
  action,
  onFinish,
  onError,
  onProgress,
}: UploadCustomRequestOptions) => {
  console.log(file);
  const formData = new FormData();

  formData.append("file", file.file);
  let res = await upload_excel(formData);
  let _list = [];
  for (let key in res.data) {
    _list = [
      ..._list,
      {
        name: key,
        id: key,
        value: res.data[key],
      },
    ];
  }
  list2.value = [];
  list1.value = _list;
  console.log(list1, "###");
  // lyla
  //   .post(action as string, {
  //     withCredentials,
  //     headers: headers as Record<string, string>,
  //     body: formData,
  //     onUploadProgress: ({ percent }) => {
  //       onProgress({ percent: Math.ceil(percent) });
  //     },
  //   })
  //   .then(({ json }) => {
  //     message.success(JSON.stringify(json));
  //     onFinish();
  //   })
  //   .catch((error) => {
  //     message.success(error.message);
  //     onError();
  //   });
};
</script>
 
 
<template>
  <n-card title="方差">
    <div style="display: flex; width: 600px">
      <div style="margin-right: 20px">
        <n-upload
          action="upload_excel"
          :custom-request="customRequest"
          :show-file-list="false"
          class="cont-btn"
        >
          <n-button>上传文件</n-button>
        </n-upload>
        <!-- <n-button type="primary" class="cont-btn" @click="sampleClick"
          >选择样本</n-button
        > -->
        <VueDraggable
          class="flex flex-col gap-2 p-4 w-300px h-300px m-auto rounded overflow-auto drag-module-bg"
          v-model="list1"
          animation="150"
          ghostClass="ghost"
          group="people"
          @update="onUpdate"
          @add="onAdd"
          @remove="remove"
        >
          <div
            v-for="item in list1"
            :key="item.id"
            class="cursor-move rounded p-1"
          >
            {{ item.name }}
          </div>
        </VueDraggable>
      </div>
      <div>
        <n-button type="primary" class="cont-btn" @click="analysisClick"
          >开始分析</n-button
        >
        <VueDraggable
          class="flex flex-col gap-2 p-4 w-300px h-300px m-auto rounded overflow-auto drag-module-bg"
          v-model="list2"
          animation="150"
          group="people"
          ghostClass="ghost"
          @update="onUpdate"
          @add="onAdd"
          @remove="remove"
        >
          <div
            v-for="item in list2"
            :key="item.id"
            class="cursor-move rounded p-1"
          >
            {{ item.name }}
          </div>
        </VueDraggable>
      </div>
    </div>
    <ECharts
      :echarts-option="optionitem"
      v-for="(optionitem, key) in option.list"
      :key="key"
    />

  </n-card>
</template>

<style scoped>
.color {
  color: #ffe600;
}
</style>
